<script setup lang="ts">
import type { Ref, Text } from "vue";


import useStore from "@src/store/store";
import { ref, inject, onMounted, onUnmounted, computed } from "vue";
import {
  CheckIcon,
  FaceSmileIcon,
  MicrophoneIcon,
  PaperAirplaneIcon,
  PaperClipIcon,
  XCircleIcon,
} from "@heroicons/vue/24/outline";
import Button from "@src/components/ui/inputs/Button.vue";
import IconButton from "@src/components/ui/inputs/IconButton.vue";
import Textarea from "@src/components/ui/inputs/Textarea.vue";
import axios, { AxiosRequestConfig, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import useServiceStore from "@src/store/serviceStore";

const serviceStore = useServiceStore()

const aiconvserations = computed(() => {
  if (serviceStore.currentConversationRelationId) {
    return serviceStore.aiConversations[serviceStore.currentConversationRelationId]
  } else {
    return [];
  }
})

const handleSendMsg = (message:string) => {
  if (serviceStore.currentConversationRelationId) {
    var relation = serviceStore.conversationRelations[serviceStore.currentConversationRelationId];
    if(relation == undefined) {
      //查是不是在history中
      relation = serviceStore.conversationRelationsHistory[serviceStore.currentConversationRelationId];
    }
  if (message.trim() !== '') {
    const msg = {
      "type":"text",
        "content":message,
        'round':'s2c',
        'website_id':relation.service.website_id,
        'service_id':relation.service.id,
        'customer_id':relation.customer_id
    }

    const str = JSON.stringify(msg);
    serviceStore.ws?.send(str);
  }
}
};
onUnmounted(() => {

})

onMounted(() => {

});
</script>

<template>
  <div class="w-full h-full border">
    <!-- <div class="px-4 py-6">
        <label for="toggle" class="text-xs text-gray-700">AI功能  </label>
        <div class="relative inline-block w-9 mr-2 align-middle select-none transition duration-200 ease-in">
            <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
            <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
        </div>
      </div> -->

    <!-- <div class="px-4 py-2 flex justify-center items-center ">
      <div class="bg-gray-200 rounded-lg">
        <div class="inline-flex rounded-lg">
          <input class="peer/shoudong" type="radio" name="room_type" id="roomPrivate" checked hidden />
          <label for="roomPrivate"
            class="radio text-center self-center py-2 px-4 rounded-lg cursor-pointer hover:opacity-75 peer-checked/shoudong:bg-indigo-300">手动回复</label>
        </div>
        <div class="inline-flex rounded-lg">
          <input class="peer/zidong" type="radio" name="room_type" id="roomPublic" hidden />
          <label for="roomPublic"
            class="radio text-center self-center py-2 px-4 rounded-lg cursor-pointer hover:opacity-75 peer-checked/zidong:bg-indigo-300">自动回复</label>
        </div>
      </div>
    </div> -->
    <div class="py-4 w-full h-full overflow-x-auto overflow-y-scroll scroll-smooth">
      <table class="w-full border-collapse border border-gray-300">
        <tbody id="attendees-list">
          <!-- Initial attendees -->
          <tr v-for="message in aiconvserations">
            <td class="border border-gray-300 px-4 py-2">
              <textarea :value="message" rows="5"
                class="block auto-rows-auto w-full text-black opacity-60 dark:text-white dark:opacity-70  focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400  dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Write your thoughts here..."></textarea>
            </td>
            <td class="border border-gray-300 px-4 py-2">
              <IconButton @click="handleSendMsg(message)"
                class="group w-7 h-7 bg-indigo-300 hover:bg-indigo-400 focus:bg-indigo-400 dark:focus:bg-indigo-300 dark:bg-indigo-400 dark:hover:bg-indigo-400 active:scale-110"
                variant="ghost" title="send message" aria-label="send message">
                <PaperAirplaneIcon class="w-[17px] h-[17px] text-white" />
              </IconButton>

            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style>
input:checked~.radio {
  color: white;
  /* background-color: green; */
}

input[placeholder="Search emoji"] {
  background: rgba(0, 0, 0, 0);
}

.v3-emoji-picker .v3-header {
  border-bottom: 0;
}

.v3-emoji-picker .v3-footer {
  border-top: 0;
}

.toggle-checkbox:checked {
  @apply: right-0 border-green-400;
  right: 0;
  border-color: #68D391;
}

.toggle-checkbox:checked+.toggle-label {
  @apply: bg-green-400;
  background-color: #68D391;
}
</style>
